<script setup>
import { ref, computed } from 'vue'

const time = ref(new Date());

setInterval(() => {
  time.value = new Date();
}, 1000);

const formattedDateTime = computed(() => {
  const year = time.value.getFullYear();
  const month = String(time.value.getMonth() + 1).padStart(2, '0');
  const day = String(time.value.getDate()).padStart(2, '0');
  const hours = String(time.value.getHours()).padStart(2, '0');
  const minutes = String(time.value.getMinutes()).padStart(2, '0');
  const seconds = String(time.value.getSeconds()).padStart(2, '0');

  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
});
</script>

<template>
  <div class="app">
    <div class="container">
      <h1 class="title">欢迎使用摆脱亚健康饮食后台管理系统</h1>
      <h1 class="time">当前时间：{{ formattedDateTime }}</h1>
    </div>
  </div>
</template>

<style scoped>
.app {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #e0f7fa, #80deea); /* 渐变背景 */
  min-height: 90vh; /* 使背景覆盖整个视口高度 */
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; /* 防止溢出 */
}

.container {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  padding: 40px;
  max-width: 600px; /* 最大宽度 */
  text-align: center; /* 内容居中 */
  position: relative;
  z-index: 1; /* 确保在图案之上 */
}

.title {
  color: #2c3e50; /* 深色字体 */
  font-size: 24px;
  margin-bottom: 20px;
}

.time {
  color: #16a085; /* 绿色字体 */
  font-size: 20px;
}

/* 添加装饰性图案 */
.app::before {
  content: "";
  background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); /* 使用透明纹理 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.1; /* 透明度 */
  z-index: 0; /* 确保在内容之下 */
}
</style>
